<template>
  <div class="test">
    <canvas width="400" height="400" ref="cvsRef"></canvas>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { mapNumToAngle } from "../utils/mapNumToAngle";
export default defineComponent({
  name: "test",
  setup() {
    const cvsRef = ref<HTMLCanvasElement>();
    onMounted(() => {
      const ctx = cvsRef.value?.getContext("2d");
      if (ctx) {
        ctx.font = "100px sans-serif";
        ctx.textAlign = "center";
        ctx.direction = "rtl";
        // fillText(text, x, y [, maxWidth])
        // 在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.
        // ctx.fillText("天若有情", 200, 200);
        ctx.strokeText("天若有情", 200, 200);
      }
    });
    return { cvsRef };
  },
});
</script>
<style scoped>
.test {
  width: 100%;
  height: 100%;
  background-color: #eee;
}
canvas {
  border: 1px solid red;
}
</style>
